<template>
  <div class="page-detail">
    <div class="detail-header">
      <div class="order-info" v-for="(item, index) in orderInfo" :key="index">
        <div class="info-text">{{ item.title }}</div>
        <div class="info-text">{{ item.val }}</div>
      </div>
    </div>
    <div class="order-list">
      <el-table :data="tableData" height="100%" style="width: 100%">
        <el-table-column prop="id" label="商品编号"> </el-table-column>
        <el-table-column prop="name" label="商品名"> </el-table-column>
        <el-table-column prop="chineseBrief" width="250" label="商品描述">
        </el-table-column>
        <el-table-column prop="img" label="商品图片">
          <template slot-scope="scope">
            <img class="goods-img" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品价格"> </el-table-column>
        <el-table-column prop="goods_count" label="商品数量"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: [
        {
          prop: "objectId",
          title: "订单号",
          val: "",
        },
        {
          prop: "deliveryTime",
          title: "配送时间",
          val: "",
        },
        {
          prop: "allPrice",
          title: "总价格",
          val: "",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.getOrderInfo();
  },
  methods: {
    getOrderInfo() {
      let objectId = this.$route.query.objectId;
      this.$H.get(`/1.1/classes/order/${objectId}`).then((res) => {
        console.log(res);
        this.tableData = res.data.orderlist;
        this.orderInfo.forEach((item) => {
          item.val = res.data[item.prop];
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.page-detail {
  display: flex;
  flex-direction: column;
  height: 100%;

  .detail-header {
    display: flex;
    margin: 10px 0 38px 0;
    .order-info {
      flex: 1;
      margin: 0 10px;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      -webkit-transition: 0.3s;
      transition: 0.3s;
       &:hover {
          box-shadow: 0 2px 12px 0 rgba(65, 37, 37, 0.1);
        }

      .info-text {
        padding: 18px 20px;
        border-bottom: 1px solid #ebeef5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        &:nth-child(2) {
          border-bottom: 1px solid transparent;
        }
      }
    }
  }

  .order-list {
    margin: 0 10px;
    height: 300px;
    // flex: 1;
  }
}
.goods-img {
  width: 100%;
  height: 100%;
}
</style>